<template>
	<view>
		<view :style="showSend?'height:150px;':'height:50px;'">

		</view>
		<view class="desc" :style="{
			'bottom':bottom+'px'
		}">
			<view class="input">
				<textarea v-model="content" placeholder="输入评论…" auto-height @focus="onbindfocus"
					@bindfocus='onbindfocus' @blur="onBlur"></textarea>
				<view class="imgs flex-c" v-show="uploadFiles.length>0">
					<view class="imgs_son" v-for="(item,index) in uploadFiles" :key="index">

						<u-image :src="item.url" mode="aspectFill" width="50px" height="50px"
							@click="previewImage(item.url)"></u-image>
						<view class="uploading flex-c" v-if="item.result=='ready' || item.result=='uploading'">上传中
						</view>
						<view class="uploading flex-c" v-if="item.result=='fail'">上传失败</view>
						<view @click="delPic(index)" class="del flex-c"
							v-if="item.result=='finish' || item.result=='fail'">
							<u-icon name="minus" size="12px" color="#FFFFFF"></u-icon>
						</view>

					</view>
				</view>
			</view>
			<view class="send flex-s" v-show="showSend">
				<view>
					<u-icon name="camera" size="28" @click="chooseImage"></u-icon>
				</view>
				<view class="send_btn flex-c" @click="send">发送</view>
			</view>
		</view>
	</view>
</template>

<script>
	const systemInfo = uni.getSystemInfoSync();
	export default {
		name: "comment",
		props: {
			themeType: {
				type: Number,
				default: 0,
			},
			themeId: {
				type: String,
				default: 0,
			}
		},
		data() {
			return {
				bottom: 0,
				keyboardHeight: 0,
				showSend: false,
				content: "",
				uploadFiles: [],
				num: 0,


			};
		},
		computed: {
			picture() {
				let picture = []
				for (let vo of this.uploadFiles) {
					picture.push(vo.url)
				}
				return picture
			},
			uploading() {
				let flag = false
				for (let vo of this.uploadFiles) {
					if (vo.result == 'uploading' || vo.result == 'ready') {
						flag = true
					}
				}
				return flag
			}
		},
		mounted() {
			uni.onKeyboardHeightChange(this.onKeyboardHeightChange);
		},
		destroyed() {
			uni.offKeyboardHeightChange(this.onKeyboardHeightChange);
		},
		methods: {
			chooseImage() {
				uni.chooseImage({
					count: 9, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: async (res) => {
						for (let vo of res.tempFilePaths) {
							this.uploadFiles.push({
								url: vo,
								result: 'ready'
							})
						}
						for (let i in this.uploadFiles) {
							const item = this.uploadFiles[i]
							if (item.result == 'ready') {
								try {
									this.$set(this.uploadFiles[i], 'result', 'uploading')
									const res = await this.$http.uploadFile(item.url)
									this.$set(this.uploadFiles[i], 'url', res.data.url)
									this.$set(this.uploadFiles[i], 'result', 'finish')
								} catch (err) {
									// this.$set(this.uploadFiles[i], 'url', '')
									this.$set(this.uploadFiles[i], 'result', 'fail')
								}
							}
						}

					}
				});
			},
			onKeyboardHeightChange(res) {
				const { height, duration } = res;
				// setTimeout(()=>{
				this.keyboardHeight = height
				// this.bottom = systemInfo.platform == 'android'?height:height
				// this.content = this.bottom || 'ceshi'
				// },500)

				// 键盘弹起
				if (height > 0) {
					console.log('键盘弹起');
				}
				// 键盘收回
				else {
					console.log('键盘收回');
				}
			},
			onBlur() {
				// this.showSend = true
				this.bottom = 0
			},
			onbindfocus() {
				this.showSend = true
				// this.bottom = this.keyboardHeight
				if (this.num == 0) {
					this.bottom = systemInfo.platform == 'android' ? 20 : this.keyboardHeight
				} else {
					this.bottom = systemInfo.platform == 'android' ? 60 : this.keyboardHeight
				}
				this.num = this.num + 1

			},
			delPic(index) {
				this.uploadFiles.splice(index, 1)
			},
			previewImage(url) {
				uni.previewImage({
					urls: this.picture,
					current: url,
				})
			},
			send() {
				if (!this.content) {
					this.$func.tips('请输入评论')
					return
				}
				if (this.uploading) {
					this.$func.tips('图片正在上传,请稍等…')
					return
				}
				let picture = []
				for (let vo of this.uploadFiles) {
					if (vo.result == 'finish') {
						picture.push(vo.url)
					}
				}
				this.$http.post("/crm/comment/add", {
					themeType: this.themeType,
					themeId: this.themeId,
					content: this.content,
					picture: picture.join(',')
				}).then(res => {
					this.$emit('send')
					this.content = ""
					this.uploadFiles = []
				})

			}
		}
	}
</script>

<style scoped lang="scss">
	.desc {
		position: fixed;
		min-height: 21px;

		box-shadow: 0px 0px 8px 0px rgba(216, 216, 216, 0.38);
		background-color: #FFFFFF;
		left: 0;
		right: 0;
		padding: 10px 15px;
		.input {
			background: #F2F2F2;
			border-radius: 8px;
			// width: 100%;
			padding:10px 13px;

			textarea {
				font-size: 14px;
			}
		}

		.imgs {
			padding: 10px 0 0 0;
			justify-content: flex-start;

			.imgs_son {
				margin: 0 10px 0 0;
				border-radius: 4px;
				position: relative;

				.uploading {
					position: absolute;
					left: 0;
					right: 0;
					top: 0;
					bottom: 0;
					background-color: rgba(0, 0, 0, 0.2);
					color: #FFFFFF;
					font-size: 12px;
				}

				.del {
					position: absolute;
					right: -7px;
					top: -7px;
					width: 18px;
					height: 18px;
					border-radius: 50%;
					background-color: #F56C6C;
				}
			}
		}

		.send {
			margin-top: 10px;

			.send_btn {
				width: 68px;
				height: 30px;
				background: #0055A6;
				border-radius: 15px;
				color: #FFFFFF;
				font-size: 13px;
			}
		}
	}
</style>